<template>
  <div>
    <el-form ref="optionRef" :model="options" label-width="100px" class="demo-dynamic">
      <el-form-item label="选项:"></el-form-item>
      <template>
        <el-form-item v-for="(item, index) in questionsList" :key="index" style="width: 500px">
          <el-row type="flex" align="middle" justify="space-around" style="height: 60px">
            <!-- 点击 设置code  根据code 查找选中项目 -->
            <el-radio-group ref="optionsRef" v-model="isRadio" v-if="questionType === '1'">
              <el-radio :label="item.code" @click.native.prevent="clickRadio(item.code)">{{ item.code }}</el-radio>
            </el-radio-group>
            <el-checkbox ref="optionsRef" v-model="item.isRight" v-else>{{ item.code }}</el-checkbox>
            <el-input v-model="item.title"></el-input>
            <el-upload
              class="avatar-uploader"
              action=""
              :show-file-list="false"
              :http-request="imgData => uploadFn(imgData, index)"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="item.img" :src="item.img" class="avatar" />
              <span v-else class="avatar-uploader-icon">上传图片</span>
            </el-upload>
          </el-row>
        </el-form-item>
      </template>
      <el-form-item>
        <el-button type="danger" size="small" @click="addItem" :disabled="questionType === '1' || serialNumber > 90"
          >+增加选项与答案</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'questionsOptions',
  props: {
    questionType: {
      type: String,
      default: '1'
    }
  },
  data () {
    return {
      enArr: [
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z'
      ],
      options: {
        questions: [
          // 问题数组
          {
            code: String.fromCharCode(this.serialNumber++),
            title: '',
            img: '',
            isRight: false
          }
        ]
      },
      serialNumber: 65, // 编码起始
      optionsNum: 4, // 默认显示4个
      isRadio: '', // 单选
      imageUrl: '', //
      imgChange: ''
    }
  },
  computed: {
    questionsList () {
      // 截取数组 去掉第一个
      return this.options.questions.slice(1)
    }
  },
  watch: {
    // 监听类型变化 重置表单
    questionType () {
      this.options.questions.forEach(item => {
        item.isRight = false // 修改所有数据为false 标题为空 图片路径为空
        item.title = ''
        item.img = ''
      })
      this.isRadio = '' // 重置单选选中
    }
  },
  created () {
    this.serialNumber = 65 // 编码起始
    for (let i = 0; i < this.optionsNum; i++) {
      // 初始4个
      this.options.questions.push({
        code: String.fromCharCode(this.serialNumber++),
        title: '',
        img: '',
        isRight: false
      })
    }
  },
  methods: {
    // 动态添加 选项
    addItem () {
      this.options.questions.push({
        code: String.fromCharCode(this.serialNumber++),
        title: '',
        img: '',
        isRight: false
      })
    },
    // 单选 修改
    clickRadio (item) {
      this.isRadio = item
      this.options.questions.filter(questionsItem => questionsItem.code === item)[0].isRight = true
      this.options.questions
        .filter(questionsItem => questionsItem.code !== item)
        .forEach(j => {
          j.isRight = false
        })
    },
    // -------------------------------------------------------------------------
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    // 自定义上传
    uploadFn (imgData, index) {
      const url = URL.createObjectURL(imgData.file) // 获取blob
      // 精确查找 通过code匹配索引的枚举  赋值url
      this.options.questions.find(item => item.code === this.enArr[index]).img = url
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-dynamic {
  .el-radio {
    margin-right: 15px;
  }
  .el-checkbox {
    margin-right: 15px;
  }
}
// 图片上传样式
::v-deep .avatar-uploader {
  height: 60px;
  .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    margin-left: 5px;
  }

  .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    display: block;
    color: #8c939d;
    width: 100px;
    height: 60px;
    line-height: 60px;
    text-align: center;
  }
  .avatar {
    width: 100px;
    height: 60px;
    display: block;
  }
}
</style>
